import React, { useState, useCallback, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom'
import { useSelector } from'react-redux'

import NavBar from '@/components/navBar/NavBar'
import Icon from '@/components/icon/Icon'
import Card from '@/components/card/Card'
import hospitalimg from '@/assets/image/hospitalcard1.png'
import doctorimg from '@/assets/image/doctorcard1.png'
import Scroll from '@/components/scroll/Scroll'

import { HospitalHomeWarper } from './styledHospitalHome.js'
import { loadDataSaga } from './store/actionCreator'

export default function HospitalHome() {
    const list = useSelector(state => {
        return state.getIn(['doctorTeam','list'])
    })
    const [hospitalid , sethospitalid] =useState()
    const location = useLocation()
    const history = useHistory()
    // const dispatch = useDispatch()
    const backHospital = useCallback(() => {
        history.push('/home/hospitallist')
    },[history])

    const goTeamHome = useCallback((id) => {
        return () => {
            history.push('/home/team/'+id)
            }
        },[history])

    useEffect(() => {
        let id = location.pathname.split('/').pop()
        sethospitalid(id)
    },[location,sethospitalid])
    // useEffect(() => {
    //     (async () => {
    //         await dispatch(loadDataSaga({"id":hospitalid}))
    //     })()
    // }, [dispatch,hospitalid])
    return (
        <HospitalHomeWarper>
            <NavBar
            title = '机构主页'
            leftArrow
            clickLeft = { backHospital}
            rightCount = {<Icon name = 'shareCircleFill'></Icon>}
            ></NavBar>
            <Scroll
            id ='doctorteam-scroll'
            loadDataSaga = {loadDataSaga}
            list = {list}
            height = '6.5rem'
            searchid = {hospitalid}
            pullingUp
            >
                <Card
                title = '北京市怀柔区洛西社区卫生服务站'
                img = {hospitalimg}
                height = '1.6rem'
                infoCount = {
                    <div className='adress'>
                        <Icon 
                            name = 'mapPinLine'
                            size = '.12rem'
                            color = '#2984F8'
                            ></Icon>
                            <span>怀柔区洛西县建设路990号</span>
                            <Icon 
                            name = 'arrowRightLine'
                            size = '.12rem'
                            ></Icon>
                    </div>
                }
                bottomCount = {
                    <div className='bottom'>
                        <div className='icon'>
                            <Icon 
                            name = 'phoneFill'
                            size = '.20rem'
                            color = '#fff'
                            bgColor = '#3DD4A7'
                            type='large'
                            ></Icon>
                            <Icon 
                            name = 'headphoneFill'
                            size = '.20rem'
                            color = '#fff'
                            bgColor = '#FDDB78'
                            type='large'
                            ></Icon>
                        </div>
                    </div>
                }
                ></Card>
                <div className='text'>
                    <div className='title'>
                        机构简介
                    </div>
                    <span>
                    始建于1994年10月，是清新地区唯一一所集医疗、教学、科研、保健为一体的国家二级甲等非营利性综合医疗机构，承担着本区群众的医疗救治、预防保健和康复、健康教育、医学科研教学等工作任务，先后荣获清新区“创建国家慢性病综合防控示范区先进单位”。
                    </span>
                </div>
                <div className='team'>
                    <div className='dtitle'>
                        医生团队
                    </div>
                    {
                        list.map( item => {
                            return (
                                <Card
                                img = {doctorimg}
                                title ={item.name}
                                infoCount = {item.info}
                                key ={item.id}
                                height = '1.15rem'
                                bgColor='#fff'
                                click = {goTeamHome(item.id)}
                                rightCount = {<Icon
                                    name='arrowRightLine'
                                    size= '.20rem'
                                    color= '#aaaaaa'
                                    ></Icon>}
                                ></Card>
                            )
                        })
                    }
                </div>
            </Scroll>
        </HospitalHomeWarper>
    )
}
